<template>
  <a-card size="small" :bordered="false" title="分类管理">
    <div class="table-operator">
      <a-form v-if="showSearch" :model="params" layout="inline" @submit="handleSearch">
        <a-form-item label="分类名称">
          <a-input v-model:value="params.categoryName" placeholder="请输入分类名称" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="params.status" placeholder="全部" :allow-clear="true">
            <a-select-option v-for="item in ShowStatusEnum.$options()" :key="item.value" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :loading="tableLoading" html-type="submit">
            <template #icon><SearchOutlined /></template>
            <span v-if="!tableLoading">搜索</span>
            <span v-else>搜索中...</span>
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <table-toolbar
      v-model:show-search="showSearch"
      v-model:columns="tableColumns"
      style="margin-top: 10px"
      @reload="handleLoadData"
    >
      <template #left>
        <a-button type="primary" @click="handleAdd()">
          <template #icon><PlusOutlined /></template>
          新增
        </a-button>
        <a-button type="primary" :disabled="!hasSelectOne" @click="handleEditToolbar">
          <template #icon><EditOutlined /></template>
          编辑
        </a-button>
        <a-button type="primary" danger :disabled="!hasSelected" @click="handleDelToolbar">
          <template #icon><DeleteOutlined /></template>
          删除
        </a-button>
      </template>
    </table-toolbar>

    <a-table
      :loading="tableLoading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :columns="tableColumns"
      :data-source="tableDataSource"
      :pagination="pageInfo"
      row-key="categoryId"
      size="middle"
      @change="handlePageChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status.color">{{ record.status.label }}</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(record.categoryId)">
            <template #icon><FormOutlined /></template>
            编辑
          </a-button>

          <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDel(record.categoryId)">
            <a-button type="primary" danger size="small">
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <category-edit ref="editRef" @reload="handleLoadData" />
  </a-card>
</template>

<script name="ArticleCategoryIndex" lang="ts" setup>
import { ShowStatusEnum } from "@/enums/common";
import { delCategorys, getPage } from "@/api/content/articleCategory";
import CategoryEdit from "./edit.vue";

const showSearch = ref<boolean>(true);

const params = reactive({
  categoryName: "",
  status: undefined
});

const tableColumns = ref<TableColumn[]>([
  {
    key: "categoryId",
    dataIndex: "categoryId",
    title: "分类ID",
    visible: false
  },
  {
    key: "categoryName",
    dataIndex: "categoryName",
    title: "分类名称"
  },
  {
    key: "status",
    dataIndex: "status",
    title: "状态"
  },
  {
    key: "sort",
    dataIndex: "sort",
    title: "排序"
  },
  {
    key: "createTime",
    dataIndex: "createTime",
    title: "创建时间",
    visible: false
  },
  {
    key: "action",
    title: "操作",
    fixed: "right"
  }
]);

const { tableLoading, pageInfo, tableDataSource, handleLoadData, handlePageChange, handleSearch } = useTablePage(
  params,
  getPage
);

//表格选择
const { selectId, selectedRowKeys, hasSelected, hasSelectOne, onSelectChange } = useTableSelect();

//添加、编辑
const editRef = ref();
const handleAdd = () => {
  editRef.value.handleAdd();
};

const handleEdit = (categoryId: number) => {
  editRef.value.handleEdit(categoryId);
};

const handleEditToolbar = () => {
  handleEdit(selectId.value);
};

//删除
const handleDel = (id: number) => {
  tableLoading.value = true;
  delCategorys(id)
    .then(() => {
      handleLoadData();
      antdMessage.success("删除成功");
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

const handleDelToolbar = () => {
  antdModal.confirm({
    title: "警告",
    icon: createVNode(ExclamationCircleOutlined),
    content: "你确定要删除选中的分类吗?",
    onOk() {
      tableLoading.value = true;
      delCategorys(selectedRowKeys.value)
        .then(() => {
          handleLoadData();
          antdMessage.success("删除成功");
        })
        .finally(() => {
          tableLoading.value = false;
        });
    }
  });
};

onMounted(() => {
  handleLoadData();
});
</script>
